<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/layui.css">
    <link rel="stylesheet" href="/css/jpatest.css">
    <script src="/js/jquery-3.7.1.min.js"></script>
</head>
<body>

<div class="container">
    <div class="layui-row">
        <div class="layui-col-xs12">
            <div style="text-align: center;font-size: 50px;">教师信息管理</div>
        </div>
    </div>

    <!--表单-->
    <!-- 给容器追加 class="layui-form-pane"，即可显示为方框风格 -->
    <form class="layui-form layui-form-pane dialog-container" id="TeacherForm" style="display: none">
        <div class="layui-form-item" id="teacher-form-id">
            <label class="layui-form-label">id</label>
            <div class="layui-input-block">
                <input type="text" name="id" id="id" autocomplete="off" placeholder="请输入教师id" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">

            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" id="name" placeholder="请输入教师姓名" autocomplete="off"
                       class="layui-input">
            </div>

        </div>
        <div class="layui-form-item">

            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input type="text" name="age" id="age" placeholder="请输入教师年龄" autocomplete="off"
                       class="layui-input">
            </div>

        </div>
        <div class="layui-form-item">

            <label class="layui-form-label">工号</label>
            <div class="layui-input-block">
                <input type="text" name="tno" id="tno" placeholder="请输入工号(必填)" autocomplete="off"
                       lay-verify="required" class="layui-input">
            </div>

        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <!--type="password" 密码样式，隐藏内容-->
                <input type="text" name="password" id="password" placeholder="请输入密码(必填)" lay-verify="required"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>


        <div class="layui-form-item" pane>
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男" checked>
                <input type="radio" name="sex" value="2" title="女">
            </div>
        </div>

        <!--表单提交按钮，使用lay-submit lay-filter来声明-->
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid  layui-bg-blue layui-btn-radius"
                    lay-submit lay-filter="teacher-form-submit"
                    id="btn-teacher-confirm">确定
            </button>
        </div>
    </form>


    <div class="layui-row">
        <div><p>使用thymeleaf和MVC(model+view+controller)显示数据</p></div>
        <div class="layui-col-xs12">
            <table class="layui-table"  lay-even>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>age</th>
                    <th>sex</th>
                    <th>password</th>
                    <th>tno</th>
                </tr>
                <!--使用thymeleaf 填充表格-->
                <tr th:each="teacher:${teachers}">  <!--根据通过model传递来的数据进行展示-->
                    <td th:text="${teacher.id}"></td>
                    <td th:text="${teacher.name}"></td>
                    <td th:text="${teacher.age}"></td>
                    <td th:text="${teacher.sex == 1 ? '男' :(teacher.sex == 2 ? '女' : '未知')}"></td>
                    <td th:text="${teacher.password}"></td>
                    <td th:text="${teacher.tno}"></td>
            </table>
        </div>
    </div>

    <!--        <div class="layui-form-item">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        教师姓名
                    </div>
                    <input id="input_name" placeholder="输入待查询的教师姓名" class="layui-input">

                </div>

                <div class="layui-input-suffix">
                    <button id="btn_query" type="button" class="layui-btn layui-btn-normal layui-btn-radius">查询
                    </button>
                </div>

                <div class="layui-row" style="margin-right: 0">
                    <div class="layui-col-xs12 toolbar" style="margin-right: 0">
                        &lt;!&ndash;添加弹出对话框的监听事件&ndash;&gt;
                        <button type="button" class="layui-btn layui-bg-blue " style="margin-right: 0"
                                onclick="showTeacherInsertOrUpdateDialog(); return false;">
                            <i class="layui-icon layui-icon-addition">新增</i>
                        </button>
                    </div>
                </div>
            </div>-->

    <div class="layui-form" style="margin: 50px 0 20px 0;">
        <div class="layui-input-group">
            <div class="layui-input-prefix">
                教师姓名
            </div>
            <input id="input_name" type="text" placeholder="输入待查询的教师姓名" class="layui-input">
            <div class="layui-input-split layui-input-suffix" style="cursor: pointer;">
                <i class="layui-icon layui-icon-clear" id="btn_clear"></i>
            </div>

            <div class="layui-input-suffix">
                <button id="btn_query" type="button" class="layui-btn layui-btn-normal layui-btn-radius">查询
                </button>
            </div>

            <div class="layui-row">
                <div class="layui-col-xs12 toolbar">
                    <!--添加弹出对话框的监听事件-->
                    <button style="margin-left: 570%" type="button" class="layui-btn layui-btn-normal layui-btn-radius"
                            onclick="showTeacherInsertOrUpdateDialog(); return false;">
                        <i class="layui-icon layui-icon-addition">新增</i>
                    </button>
                </div>
            </div>
        </div>
    </div>


    <div><p>使用ajax、jQuery和apiController显示数据</p></div>
    <div class="layui-col-xs12">
        <table class="layui-table" lay-size="lg" lay-even>
            <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>age</th>
                <th>sex</th>
                <th>password</th>
                <th>tno</th>
                <th>编辑</th>
            </tr>
            </thead>

            <!--使用ajax访问api接口获取数据完成显示-->
            <tbody id="teacherList"></tbody>

        </table>
    </div>

</div>


</div>


<script src="/js/layui.js"></script>
<script src="/myjs/teacher/ajax.js"></script>
</body>
</html>